<!-- 打印报销单 -->
<template>
  <div class="print-reimbursement-dialog">
    <el-dialog width="900px" class top="6vh" title="打印报销单" :append-to-body="true" :visible="myVisible" @close="close">
      <div class="title" slot="title">
        <span class="text">打印报销单</span>
        <!-- <span class="operation-btns">
          <el-button class="print-btn" type="primary" @click="print">打 印</el-button>
        </span> -->
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="样式一" name="first">
        <span style="float: right; margin-right: 40px;">
          <el-button class="print-btn" type="primary" @click="print">打 印</el-button>
        </span>
      <div ref="printReimbur" style="height: 500px;">
        <div style="width: 233px; left: 10px; top: 80px; position: absolute; font-size: 16px;">{{order.clientName}}</div>
        <div style="width: 233px; left: 12px; top: 115px; position: absolute; font-size: 16px;">{{order.boat}}/{{order.voyage}}</div>
        <div style="width: 233px; left: 300px; top: 115px; position: absolute; font-size: 16px;">{{order.blno}}</div>
        <div style="width: 233px; left: 10px; top: 145px; position: absolute; font-size: 16px;">{{order.carton}}</div>
        <div style="width: 233px; left: 10px; top: 193px; position: absolute; font-size: 16px;">{{order.feedata[6].money}}</div>
        <div style="width: 233px; left: 200px; top: 193px; position: absolute; font-size: 16px;">{{order.feedata[0].money}}</div>
        <div style="width: 233px; left: 430px; top: 193px; position: absolute; font-size: 16px;">{{order.feedata[1].money}}</div>
        <div style="width: 233px; left: 10px; top: 235px; position: absolute; font-size: 16px;">{{order.feedata[7].money}}</div>
        <div style="width: 233px; left: 200px; top: 235px; position: absolute; font-size: 16px;">{{order.feedata[2].money}}/{{order.feedata[3].money}}</div>
        <div style="width: 233px; left: 430px; top: 236px; position: absolute; font-size: 16px;">{{order.feedata[5].money}}</div>
        <div style="width: 233px; left: 10px; top: 265px; position: absolute; font-size: 16px;">{{order.sgf}}</div>
        <div style="width: 233px; left: 200px; top: 275px; position: absolute; font-size: 16px;">{{order.feedata[10].money}}</div>
        <div style="width: 233px; left: 420px; top: 275px; position: absolute; font-size: 16px;">{{order.feedata[4].money}}</div>
        <div style="width: 233px; left: 30px; top: 315px; position: absolute; font-size: 16px;">{{order.feedata[11].money}}</div>
        <div style="width: 233px; left: 200px; top: 315px; position: absolute; font-size: 16px;">{{order.feedata[9].money}}</div>
        <div style="width: 233px; left: 420px; top: 315px; position: absolute; font-size: 16px;">{{order.feedata[13].money}}</div>
      </div>
      </el-tab-pane>
      <el-tab-pane label="样式二" name="second">
        <span style="float: right; margin-right: 40px;">
        <el-button class="print-btn" type="primary" @click="PrintTow">打 印</el-button>
        </span>
        <div ref="printTow" style="margin-top: 30px;">
        <table style="width: 50%; boder-right: 1px solid #000; boder-top: 1px solid #000; color: black; font-size: 16px;" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-top: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">客户</td>
            <td style="text-align: center; font-weight: 500; font-size: 18px;">{{order.clientName}}<span style="float: right;">{{order.applyTime}}</span></td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">船 名</td>
            <td style="border-bottom: 1px solid #000; border-top: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.boat}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">提单号</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.blno}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">打单费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[0].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">服务费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[8].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">中理货费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[2].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">外理货费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[3].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">港建费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[4].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">港杂费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[5].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">快递费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[9].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">超期费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[10].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">坏污箱费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[11].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">台头费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[6].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">计划费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[7].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">滞纳金</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[12].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">提箱费</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[1].money}}</td>
          </tr>
          <tr>
            <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">其他</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.feedata[13].money}}</td>
          </tr>
          <tr>
            <td style="border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; width: 70px; text-align: center;">合计</td>
            <td style="border-bottom: 1px solid #000; border-right: 1px solid #000; text-align: center; font-weight: 500; font-size: 18px;">{{order.sumMoney}}</td>
          </tr>
        </table>
        </div>
      </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from '@util'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    tableIndexData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      myVisible: this.visible,
      order: {},
      activeName: 'first'
    }
  },
  watch: {
    visible (value) {
      this.myVisible = value
      console.log(this.tableIndexData, '1232')
      this.order = this.tableIndexData
      console.log(this.order, '12323')
    },
    myVisible (value) {
      this.$emit('visibleChange', value)
    }
  },
  async mounted () {

  },
  methods: {
    print () {
      this.$print(this.$refs.printReimbur) // 使用
    },
    PrintTow () {
      this.$print(this.$refs.printTow)
    },
    close () {
      this.myVisible = false
    }
  }
}
</script>

<style lang="less">
  .print-reimbursement-dialog {

  }
</style>
